<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    .page{
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .div1 .div1_1{
        margin:0 auto;
    }
    .div1 .div1_1 .row{
        writing-mode: vertical-rl;
        writing-mode: tb-lr; 
        display: inline-block;
        width: 45px;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
        letter-spacing: 20px;
        padding: 0.5em;
    }

    .div2 .text{
        width: 80%;
        margin: 0 auto;
        font-size: 6em;
        letter-spacing: 10px;
    }
    .div3{
        width: 100%;
    }
    .div3 h1{
        width: 100%;
        margin-bottom: 100px;
        font-size: 30px;
        letter-spacing: 10px;
        text-align: center;
    }
    .split-line{
        overflow: hidden;
    }

    .superShadow {
    text-shadow:     0 1px 0 hsl(174,5%,80%),
                        0 2px 0 hsl(174,5%,75%),
                        0 3px 0 hsl(174,5%,70%),
                        0 4px 0 hsl(174,5%,66%),
                        0 5px 0 hsl(174,5%,64%),
                        0 6px 0 hsl(174,5%,62%),
                        0 7px 0 hsl(174,5%,61%),
                        0 8px 0 hsl(174,5%,60%),
        
                        0 0 5px rgba(0,0,0,.05),
                        0 1px 3px rgba(0,0,0,.2),
                        0 3px 5px rgba(0,0,0,.2),
                    0 5px 10px rgba(0,0,0,.2),
                    0 10px 10px rgba(0,0,0,.2),
                    0 20px 20px rgba(0,0,0,.3);
    }
</style>
<body>
    <div class="page div1">
        <div class="div1_1">
            <div class="row" id="row1">千山鸟飞绝</div>
            <div class="row" id="row2">万径人踪灭</div>
            <div class="row" id="row3">孤舟蓑笠翁</div>
            <div class="row" id="row4">独钓寒江雪</div>
        </div>
    </div>
    <div class="page ">
        <div class="div2">
            <div class="text" id="page2text">No matter how much I feel lost and hesitated now. I need to live the way I want at last.</div>
        </div>
    </div>
    <div class="page">
        <div class="div3">
            <h1 class="page3text">
                JS&nbsp;PHP&nbsp;JAVA&nbsp;PYTHON
                <br/>
                VUE&nbsp;SWOOLE&nbsp;SPRING&nbsp;DJAOGO
            </h1>
        </div>
    </div>
    
    <script src="js/gsap/gsap.min.js"></script>
    <script src="js/SplitText.min.js"></script>
    <script src="js/gsap/ScrollTrigger.min.js"></script>
    <script>
        gsap.registerPlugin(SplitText);
        var t1 = gsap.timeline();
        /*var text = new SplitText("#row1",{
            type:"words,chars"
        });
        var text2 = new SplitText("#row2",{
            type:"words,chars"
        });*/
        let targets = gsap.utils.toArray(".row"); 
        gsap.set(".row",{prespective:100});
        targets.forEach((e,i)=>{
            var text = new SplitText(e,{
                type:"chars"
            });
            var chars = text.chars;
            /*for(var i = 0; i < chars.length; i++){  
                t1.from(chars[i],{
                    scrollTrigger: {
                        trigger: e,
                        //toggleActions: "restart pause resume reverse",
                        start: "top",
                    },
                    duration:0.8,
                    opacity:0,//透明度
                    autoAlpha:0,
                    scale:1,//缩放
                    y:-80,
                    rotationX:-100,
                    transformOrigin:"50% 50% 10",
                    //ease:"back",
                    stagger:0.02
                })
            }*/
            t1.from(chars,{
                /*scrollTrigger: {
                    trigger: e,
                    //toggleActions: "restart pause resume reverse",
                    start: "top",
                },*/
                duration:0.8,
                opacity:0,//透明度
                autoAlpha:0,
                scale:1,//缩放
                y:-80,
                rotationX:-100,
                transformOrigin:"50% 50% 10",
                //ease:"back",
                stagger:0.02
            })
        })
        
        //var chars = text.chars;
        //var chars2 = text2.chars;
        
        //gsap.set("#row1",{prespective:400});//设置3d距离
        
      
        /*t1.from(chars,{
            duration:1,
            opacity:0,//透明度
            scale:0,//缩放
            y:0,
            rotationX:100,
            transformOrigin:"0% 50% -50",
            ease:"back",
            stagger:0.02
        })
        t1.from(chars2,{
            duration: 1, 
            opacity:0,//透明度
            scale:4, 
            autoAlpha:0,  
            rotationX:-180,  
            transformOrigin:"00% 50% -50", 
            ease:"back", 
            stagger: 0.02
        })*/
        var page2text = new SplitText("#page2text", {type:"chars, words"}),
        numChars = page2text.chars.length;
        for(var i = 0; i < numChars; i++){
            //random value used as position parameter
            t1.from(page2text.chars[i], 2, {opacity:0}, Math.random() * 2);
        }

        const quotes = document.querySelectorAll(".page3text");

        function setupSplits() {
            quotes.forEach(quote => {
                // Reset if needed
                if(quote.anim) {
                    quote.anim.progress(1).kill();
                    quote.split.revert();
                }
                quote.split = new SplitText(quote, { 
                    type: "lines,words,chars",
                    linesClass: "split-line",
                });
                for(var i = 0; i < numChars; i++){
                    quote.anim = gsap.from(quote.split.chars[i], {
                        scrollTrigger: {
                            trigger: quote,
                            toggleActions: "restart pause resume reverse",
                            start: "top 50%",
                        },
                        duration: 0.6, 
                        ease: "circ.out", 
                        y: 100, 
                        stagger: 0.02,
                    });
                }
            });
        }
        ScrollTrigger.addEventListener("refresh", setupSplits);
        setupSplits();
    </script>
</body>
</html>